<template>
    <div class="data-table">
        <!-- 查询条件部分 -->
        <div v-if="slots.search" class="dt-search clearfix">
            <el-row>
                <el-col :span="20">
                    <el-form ref="searchForm" :inline="true" label-position="left" label-width="80px">
                        <slot name="search" :criterias="criterias"></slot>
                    </el-form>
                </el-col>
                <el-col :span="4">
                    <div class="dts-btn-group fr">
                        <el-button type="primary" size="large" @click="loadTableData">
                            查询
                        </el-button>
                        <el-button size="large" @click="resetSearchForm(searchForm)">
                            重置
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 工具栏部分 -->
        <div class="dt-toolbar">
            <el-row>
                <el-col :span="12">
                    <label>{{ title }}</label>
                </el-col>
                <el-col :span="12">
                    <div class="fr">
                        <el-button-group>
                            <slot name="toolbar"></slot>
                        </el-button-group>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 数据表格部分 -->
        <div class="dt-main">
            <el-table ref="table" border v-loading="loading" :data="dataList"
                element-loading-text="拼命加载中" empty-text="木有数据啊~" :cell-style="{ textAlign: 'center' }">
                <el-table-column v-if="selection" type="selection" header-align="center" align="center" width="50" />
                <slot></slot>
            </el-table>
        </div>
        <!-- 数据分页部分 -->
        <div class="dt-pagination">
            <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import http from "@/utils/httpRequest";
import criteria from '@/utils/criteria';
import { ref, reactive, onMounted, useSlots } from "vue";
import type { FormInstance } from "element-plus";

// 插槽
const slots = useSlots();

// 查询表单
const searchForm = ref<FormInstance>();

// 属性定义
const props = defineProps({
    name: { type: String, required: true },
    title: String,
    // 是否初始化查询
    initLoad: { type: Boolean, default: false },
    // 请求地址
    url: { type: String, required: true },
    // 是否分页
    pagination: { type: Boolean, default: true },
    // 是否有复选框
    selection: { type: Boolean, default: true },
    // 查询参数
    /* criterias: {
        type: Object,
        default() {
            return undefined;
        },
    }, */
});

const criterias = ref({});

// 表格加载状态
const loading = ref(false);
// 请求列表数据
const dataList = ref([]);
// 分页相关信息
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 组件挂载完成后执行
onMounted(() => {
    if (props.initLoad) {
        loadTableData();
    }
});

// 获取数据列表
const loadTableData = () => {
    loading.value = true;
    http
        .post({
            url: props.url,
            data: {
                current: 1,
                size: pageSize.value,
                criterias: buildCriteriasModel(),
            },
        })
        .then(({ data }) => {
            if (http.success(data)) {
                dataList.value = props.pagination ? data.body.records : data.body;
                total.value = props.pagination ? data.body.total : 0;
            } else {
                dataList.value = [];
                total.value = 0;
            }
            loading.value = false;
        });
};

// 构建动态查询参数模型
const buildCriteriasModel = () => {
    let cs = props.criterias;
    let arr = [];
    if (!cs) {
        return arr;
    }
    Object.keys(cs).forEach(function (key) {
        let val = cs[key];
        if (val === undefined || val === null || val === "") {
            return;
        }
        // 如果查询条件是 string 类型的话，则直等
        if (!(val instanceof Array || val instanceof Object)) {
            arr.push(criteria.eq(key, cs[key]));
            return;
        }
        if (val instanceof Array) {
            arr.push(criteria.bt(key, cs[key]));
            return;
        }
        let op = cs[key]["type"];
        arr.push(criteria[op](key, cs[key]["value"]));
    });
    return arr;
};

// 重置查询表单
const resetSearchForm = (form: FormInstance | undefined) => {
    if (!form) return;
    form.resetFields();
}

</script>